<template>
  <div>
    <van-nav-bar
      fixed
      title="采购下单"
      left-arrow
      class=""
      @click-left="$utils.back($route.path)"
    />
    <div class="has-top " style="height:100vh">
      <!-- 搜索栏 -->
      <div class="flex-s-c bg-white">
        <svg-icon icon-class="scan" class="fs-30 ml-25" @goPage="scan" />
        <top-search
          class="flex-1"
          type="primary"
          :val="val"
          :area-show="areaShow"
          :input-style="inputStyle"
          @search="search"
        />
      </div>

      <!-- 条件筛选栏 -->
      <div class="flex-center bg-white hb mt-20 ptb-25 fs-26">
        <div v-for="(item,index) in filterDataList" :key="index" class="flex-center tab-item" :class="tabActiveIndex===index?'tab-active':''" @click="changeTab(index)">
          {{ item }}
        </div>
        <!-- <div class="flex-center tab-item tab-item-scan" @click="scan">
          <span class="mr-15">扫码</span>
          <svg-icon icon-class="scan" class="fs-30 mt-10 mb-15" />
        </div> -->
      </div>

      <!-- 商品分类及列表栏 -->
      <div class="flex list-content">
        <!-- 商品分类 -->
        <div class="flex-s-0 scoll-y">
          <ul>
            <li
              v-for="(item, index) in classifyList"
              :key="index"
              :class="index === activeIndex ? 'bg-white' : ''"
            >
              <div
                class="tac fs-26 ptb-36 plr-20 classifyItem"
                :class="index === activeIndex&&isFirstActive ? 'activeIndex' : ''"
                @click="changeClassify(index)"
              >{{ item.name }}</div>
              <div v-if="item.children&&item.children.length>0" v-show="index === activeIndex &&showSecond">
                <div v-for="(ite, ind) in item.children" :key="ind" class="tac fs-24 ptb-36 plr-20 classifyItem" :class="ind === activeSecondIndex&&!isFirstActive ? 'activeIndex' : ''" @click="changeSecondClassify(ind)">
                  {{ ite.name }}
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!-- 商品列表 -->
        <div id="scrollBox" ref="scrollBox" class=" bg-f9 flex-1 scoll-y">
          <productList :product-list="productList" :type-obj="supplierRequestData" :purchase-list="supplierProductList" :show-tab="showTab" list-type="purchase" @goDetailPage="goDetailPage" @changeItem="changeItem" />
          <no-data v-if="productList.length === 0&&itemActiveIndex===0" />
          <p v-if="end===true&&productList.length!==0&&itemActiveIndex===0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
          <no-data v-if="supplierProductList.length === 0&&itemActiveIndex===1" />
          <p v-if="supplierEnd===true&&supplierProductList.length!==0&&itemActiveIndex===1" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
        </div>
      </div>
    </div>

    <!-- 商品详情弹窗 -->
    <van-popup v-model="detailShow" position="bottom" class="full-width full-height detail-page">
      <OrderDetail :product-id="productId" @back="detailShow = false" @gotoSupplier="gotoSupplier" />
    </van-popup>
  </div>
</template>

<script>
import TopSearch from 'components/Search'
import noData from 'components/noData'
import productList from 'components/productList'
import OrderDetail from 'components/purchase/orderDetail'
import { GetProductTypeTree, GetPurchaseProductListPage, GetSupplierPurchaseProductListPage, GetPurchaseProductDetailPage } from 'api/purchase'
export default {
  components: {
    TopSearch,
    noData,
    productList,
    OrderDetail
  },
  data() {
    return {
      // 搜索栏配置及数据
      areaShow: false,
      val: '',
      inputStyle: 'inputStyle-1',

      // 筛选栏配置及数据
      tabActiveIndex: 0,
      filterDataList: ['全部', '最近订购', '已添加购物车'],

      // 分类栏配置及数据
      activeIndex: 0,
      activeSecondIndex: -1,
      showSecond: false,
      isFirstActive: true,
      classifyList: [],
      initClassify: true, // 是否需要初始化分类

      // 商品列表
      productList: [],
      supplierProductList: [],
      showTab: true, // 显示切换栏
      itemActiveIndex: 0, // 默认显示栏

      // 商品详情
      Model: {},
      productId: 0,
      detailShow: false,

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      scollTop: 0,
      end: false,

      supplierTotalAmout: 0,
      supplierScollRequest: true,
      supplierScollTop: 0,
      supplierEnd: false,

      // 请求参数(按商品展示)
      requestData: {
        PageIndex: 1,
        PageSize: 10,
        type: 0
      },

      // 请求参数(按供应商展示)
      supplierRequestData: {
        PageIndex: 1,
        PageSize: 10,
        type: 0
      }

    }
  },
  created() {
    this.GetProductTypeTree()
  },
  mounted() {
    this.$nextTick(function() {
      document.querySelector('#scrollBox').addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    // 关键字搜索商品
    search(key) {
      console.log(key)
      this.resetParams()
      this.requestData.searchKey = key
      this.supplierRequestData.searchKey = key
      this.GetPurchaseProductListPage()
      this.GetSupplierPurchaseProductListPage()
    },

    // 修改筛选条件
    changeTab(index) {
      this.resetParams()
      this.tabActiveIndex = index
      this.requestData.type = index
      this.supplierRequestData.type = index
      this.GetPurchaseProductListPage()
      this.GetSupplierPurchaseProductListPage()
    },
    gotoSupplier(id) {
      this.$router.push('/purchase/StoreHome/' + id)
    },

    scan() {
      const _this = this
      _this.$utils.Qcode(0, function(res) {
        console.log(res)
        _this.resetParams()
        _this.requestData.searchKey = res
        _this.supplierRequestData.searchKey = res
        _this.GetPurchaseProductListPage()
        _this.GetSupplierPurchaseProductListPage()
      })
    },

    // 重置请求参数及数据
    resetParams() {
      this.requestData.PageIndex = 1
      this.requestData.PageSize = 10
      this.scollRequest = true
      this.scollTop = 0
      this.end = false
      this.productList = []

      this.supplierRequestData.PageIndex = 1
      this.supplierRequestData.PageSize = 10
      this.supplierScollRequest = true
      this.supplierScollTop = 0
      this.supplierEnd = false
      this.supplierProductList = []
    },

    // 点击选择分类
    changeClassify(index) { // 一级分类
      this.isFirstActive = true
      if (this.activeIndex !== index) {
        this.showSecond = true
      } else {
        this.showSecond = !this.showSecond
      }
      if (this.activeIndex !== index || (this.activeIndex === index && this.activeSecondIndex !== -1)) {
        this.resetParams()
        this.activeIndex = index
        this.activeSecondIndex = -1
        this.requestData.typePath = this.classifyList[index].parent_path
        this.supplierRequestData.typePath = this.classifyList[index].parent_path
        this.productList = []
        this.supplierProductList = []
        this.GetPurchaseProductListPage()
        this.GetSupplierPurchaseProductListPage()
      }
    },
    changeSecondClassify(index) { // 二级分类
      if (this.activeSecondIndex !== index) {
        this.resetParams()
        const _list = this.classifyList[this.activeIndex].children
        this.isFirstActive = false
        this.activeSecondIndex = index
        this.requestData.typePath = _list[index].parent_path
        this.supplierRequestData.typePath = _list[index].parent_path
        this.productList = []
        this.supplierProductList = []
        this.GetPurchaseProductListPage()
        this.GetSupplierPurchaseProductListPage()
      }
    },

    // 打开商品详情弹窗
    goDetailPage(item, index) {
      this.productId = item.ProductId
      this.detailShow = true
    },

    changeItem(index) {
      this.itemActiveIndex = index
    },
    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (this.itemActiveIndex === 0) {
        if (_this.scollRequest === true) {
          if (this.$utils.getScrollHeight('scrollBox') - this.$utils.getClientHeight('scrollBox') - this.$utils.getScrollTop('scrollBox') <= 5) {
            _this.scollRequest = false
            // alert('触发！！！')
            console.log('加载')
            _this.scollTop = this.$utils.getScrollTop('scrollBox')
            if (_this.requestData.PageIndex < _this.totalAmout) {
              _this.requestData.PageIndex++
              _this.GetPurchaseProductListPage()
            } else {
              console.log('end')
              _this.end = true
            }
          // }
          }
        }
      } else if (this.itemActiveIndex === 1) {
        if (_this.supplierScollRequest === true) {
          if (this.$utils.getScrollHeight('scrollBox') - this.$utils.getClientHeight('scrollBox') - this.$utils.getScrollTop('scrollBox') <= 5) {
            _this.supplierScollRequest = false
            // alert('触发！！！')
            console.log('加载')
            _this.supplierScollTop = this.$utils.getScrollTop('scrollBox')
            if (_this.supplierRequestData.PageIndex < _this.supplierTotalAmout) {
              _this.supplierRequestData.PageIndex++
              _this.GetSupplierPurchaseProductListPage()
            } else {
              console.log('end')
              _this.supplierEnd = true
            }
          // }
          }
        }
      }
    },

    // 获取商品详情
    GetPurchaseProductDetailPage(id) {
      GetPurchaseProductDetailPage({ id: id }).then(res => {
        if (res) {
          this.Model = res.Data
          this.detailShow = true
        }
      })
    },

    // 获取门店商品分类列表
    GetProductTypeTree() {
      GetProductTypeTree({ parent_path: '_0_2_', InfoType: 1 }).then(res => {
        if (res) {
          this.initClassify = false
          this.classifyList = []
          const totalClassify = {
            OrderBy: res.Data.OrderBy,
            id: res.Data.id,
            name: res.Data.name,
            parent_id: res.Data.parent_id,
            parent_path: res.Data.parent_path,
            type_id: res.Data.type_id
          }
          this.classifyList.push(totalClassify)
          if (res.Data.children && res.Data.children.length > 0) {
            res.Data.children.forEach(item => {
              this.classifyList.push(item)
            })
          }

          this.requestData.typePath = res.Data.parent_path
          this.supplierRequestData.typePath = res.Data.parent_path
          this.productList = []
          this.supplierProductList = []
          this.GetPurchaseProductListPage()
          this.GetSupplierPurchaseProductListPage()
        }
      })
    },

    // 获取商品列表
    GetPurchaseProductListPage() {
      const _this = this
      GetPurchaseProductListPage(_this.requestData).then(res => {
        if (res) {
          if (res.Data && res.Data.length && res.Data.length > 0) {
            res.Data.forEach(item => {
              this.productList.push(item)
            })
            _this.totalAmout = res.TotalAmout
            _this.scollRequest = true
            if (_this.scollTop > 0) {
              _this.$refs.scrollBox.scrollTo(0, _this.scollTop)
            }
          }
        }
      })
    },
    // 获取商品列表(按供应商)
    GetSupplierPurchaseProductListPage() {
      const _this = this
      GetSupplierPurchaseProductListPage(_this.requestData).then(res => {
        if (res) {
          if (res.Data && res.Data.length && res.Data.length > 0) {
            res.Data.forEach(item => {
              this.supplierProductList.push(item)
            })
            _this.supplierTotalAmout = res.TotalAmout
            _this.supplierScollRequest = true
            if (_this.supplierScollTop > 0) {
              _this.$refs.scrollBox.scrollTo(0, _this.supplierScollTop)
            }
          }
        }
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.tab-item{
  margin: 0 auto;
  position: relative;
}
.tab-item-scan{
  @include bg-primary;
  color:$colorF;
  padding: 0 25px;
  border-radius: 30px;
}
.tab-active:after{
  content:'';
  position: absolute;
  width: calc(100% - 4px);
  height: 4px;
  @include bg-primary;
  bottom: -10px;
  left: 2px;
  border-radius: 2px;
}

// 以上修整完成
.list-content{
  height: calc(100% - 216px);
}

.scoll-y {
  overflow-y: scroll;
}
.classifyItem {
  width: 200px;
}
.activeIndex {
  background: $colorF;
  position: relative;
  &:before {
    content: '';
    height: calc(100% - 40px);
    width: 8px;
    @include bg-primary();
    position: absolute;
    top: 20px;
    left: 0;
    border-radius: 0 8px 8px 0;
  }
}
.van-popup{
  background: transparent;
}
.detail-page{
  background: $colorF5;
}
</style>
